<template>
  <div class="outline" style="display: flex">
    <div class="left" style="width: 30%">
  <!--    公告-->
      <div class="announcement1">
        <p style="font-size: 20px;font-weight: bold">管理员公告</p>
        <p v-for="i in content_admin">
          <el-tag>{{i.createTime}}</el-tag>
          <br/>
          {{i.content}}
          <el-divider />
        </p>
      </div>
    </div>
    <div class="middle" style="width: 30%">
    <div class="announcement2">
      <p style="font-size: 20px;font-weight: bold">教师公告</p>
      <p v-for="i in content_teacher">
        <el-tag>{{i.createTime}}</el-tag>
        <br/>
        {{i.content}}
        <el-divider />
      </p>
    </div>
  </div>
    <!--    视频播放-->
    <div class="video" style="width: 30%">
      这里用来放视频章节大纲
    </div>
  </div>
</template>

<script lang="ts" setup>
// 返回学生的姓名、观看时长等信息
import {onMounted, ref} from "vue";
import axios from "axios";

const content_admin = ref([])
const load_admin_notice = () => {
  axios.get('/NoticeAdmin/all')
      .then(function (res){
        content_admin.value = res.data.data
      })

}

const content_teacher = ref([])
const load_teacher_notice = () => {
  axios.get('/tcnotice/all')
      .then(function (res){
        content_teacher.value = res.data.data
      })

}
onMounted(async ()=>{
  load_admin_notice()
  load_teacher_notice()
})

</script>

<style scoped>
.outline{
  justify-content: space-between;
  display: flex;
  margin-top: 30px;
}
.left{
  width: 70%;
  margin-left: 40px;
}
.stime{
  padding: 8px 20px;
  background: #F8F8F8;
  margin-bottom: 10px;
  margin-top: 15px;
  overflow: hidden;
  justify-content: space-between;
  display: flex;
}
.el-button--warning{
  margin-right: 10px;
  width: 140px;
  height: 44px;
  font-size: large;
  background-image: linear-gradient(#FF7E00, #FF6C00);
  border-color: #EF6502;
  border-bottom: 1px solid #b25900;
}
.video{
  background: #F8F8F8;
  margin-right: 20px;
  width: 20%;
  margin-top: 10px;
}
</style>
